<%--
  Created by IntelliJ IDEA.
  User: ASUS
  Date: 2023/5/13
  Time: 10:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main">

        <fieldset class="table-search-fieldset">
            <legend>搜索信息</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" action="">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">用户姓名</label>
                            <div class="layui-input-inline">
                                <input type="text" name="userName4search" id="userName4search"
                                       autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button type="submit" class="layui-btn layui-btn-primary"  lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>

        <table class="layui-hide" id="articleMainTable" lay-filter="currentTableFilter"></table>
        <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
        <div id="mainEcharts" style="width: 100%;height:400px;"></div>

        <script type="text/html" id="currentTableBar">
            <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="mainMessageCheck">用户文章详情</a>
        </script>

    </div>
</div>

<script>
    function echart1Str(vname, dataList) {
        var myChart = echarts.init(document.getElementById('mainEcharts'));
        var option = {
            grid: {
                top: '5%',
                right: '2%',
                left: '2%',
                bottom: '5%'
            },
            tooltip: {
                trigger: 'item',
                axisPointer: {
                    lineStyle: {
                        color: '#57617B'
                    }
                }
            },
            xAxis: [{
                type: 'category',
                data: vname,
                axisPointer: {
                    type: 'line'
                },
                axisLine: {
                    lineStyle: {
                        color: '#272456'
                    }
                },
                axisLabel: {
                    textStyle: {
                        fontSize: 12,
                        color: 'rgba(0,0,0,0.5)',
                    }
                },
            }],
            yAxis: [{
                axisLabel: {
                    formatter: '{value}',
                    textStyle: {
                        fontSize: 12,
                        color: 'rgba(0,0,0,0.5)',
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: '#272456'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(0,0,0,0.2)'
                    }
                }
            }],
            series: [{
                type: 'bar',
                data: dataList,
                barWidth: '50%',
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#39e7d7'
                        }, {
                            offset: 1,
                            color: '#10A7DB'
                        }], false),
                        barBorderRadius: [5, 5, 0, 0],
                        /*shadowColor: 'rgba(0,255,225,1)',
                         shadowBlur: 4,*/
                    }
                }
            }]
        };
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }

    layui.use(['form', 'table','miniPage','element','echarts'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            miniPage = layui.miniPage,
            echarts = layui.echarts;

        // /**
        //  * 初始化表单，要加上，不然刷新部分组件可能会不加载
        //  */
        // table.render();

        table.render({
            elem: '#articleMainTable',
            url: 'user/getUserList',
            method:'post',
            toolbar: '#toolbarDemo',
            defaultToolbar: ['filter', 'exports', 'print', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            cols: [[
                {type: 'numbers', title: '序号', width: 50, fixed: 'left' },
                {field: 'userId',align:'center', title: 'ID',sort: true},
                {field: 'nickName', title: '用户名'},
                {field: 'articleNum', title: '文章数量'},
                {title: '操作', minWidth: 130, toolbar: '#currentTableBar', align: "center"}
            ]],done: function (res, curr, count) {
                console.log(res);
                var dataName = [], dataList = [];
                for (var i = 0; i < res.data.length; i++) {
                    dataName.push(res.data[i].userId);
                    dataList.push(res.data[i].articleNum);
                }
                //渲染图表;
                echart1Str(dataName, dataList);
            },
            limits: [8, 12, 16, 20, 35, 50],
            limit: 8,
            page: true,
            skin: 'line'
        });

        // // 基于准备好的dom，初始化echarts实例
        // var myChart = echarts.init(document.getElementById('mainEcharts'));

        // // 指定图表的配置项和数据
        // var option = {
        //     title: {
        //         text: '用户文章数量柱状图'
        //     },
        //     tooltip: {},
        //     legend: {
        //         data:['文章数']
        //     },
        //     xAxis: {
        //         data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        //     },
        //     yAxis: {},
        //     series: [{
        //         name: '销量',
        //         type: 'bar',
        //         data: [5, 20, 36, 10, 10, 20]
        //     }]
        // };
        //
        // // 使用刚指定的配置项和数据显示图表。
        // myChart.setOption(option);


        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
            var table=layui.table;
            var result = JSON.stringify(data.field);
            console.log(result);
            var search=$("#userName4search").val();
            console.log(search);
            //执行搜索重载
            table.reload('articleMainTable', {
                url: 'user/getUserList',
                method:'post',
                where: {
                    search: search
                },
                page: {
                    curr: 1
                },
            });
            return false;
        });

        table.on('tool(currentTableFilter)', function (obj) {

            var data = obj.data;
            if (obj.event === 'mainMessageCheck') {
                var contentEdit = "/articleTable?userId="+data.userId;
                var openWH = miniPage.getOpenWidthHeight();
                var index = layer.open({
                    title: '用户文章信息维护',
                    type: 2,
                    shade: 0.2,
                    maxmin:true,
                    shadeClose: true,
                    area: [openWH[0] + 'px', openWH[1] + 'px'],
                    offset: [openWH[2] + 'px', openWH[3] + 'px'],
                    content: contentEdit,
                    // success: function(layero, index){
                    //     // // #aaa 表示的是弹出子页面的div的id值，
                    //     // var div = layero.find('iframe').contents().find('#editFrom');
                    //     // var body = layer.getChildFrame('body', index);
                    //     // //获取子页面的index
                    //     // var iframeWindow = window['layui-layer-iframe'+ index]
                    //     // //给子页面id=aaa的dev里的不同ID值的元素赋值
                    //     // div.find("#nickName").val(data.nickName);
                    //     // div.find("#email").val(data.email);
                    //     // div.find('#birthday').val(layui.util.toDateString(data.birthday, 'yyyy-MM-dd'));
                    //     // div.find("input[name=gender][value='1']").attr("checked", data.gender == "1" ? true : false);
                    //     // div.find("input[name=gender][value='0']").attr("checked", data.gender == "0" ? true : false);
                    //     // form.render();
                    // },
                    end: function (){
                        table.reload('articleMainTable',{where: null})
                    }
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
                return false;
            }
        });
    });
</script>
